﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="HaiweiCaculator.js"></script>

    <style>
        #datagrid {
            width: 100%;
            height: auto;
            font-family: 'Microsoft YaHei';
            font-size: 15px;
            font-weight: 500;
            text-align: center;
            border: 1px solid #E2ECF5;
            padding: 0;
            margin: 0;
        }

        #datagrid td {
            BORDER-BOTTOM: 1px solid #E2ECF5;
            height: 50px;
        }

        .panel {
            border: 1px solid #E2ECF5;
            margin-top: 15px;
            width: 100%;
            height: auto;
            overflow: auto;
        }

        .panel .content {
            float: left;
            text-align: center;
            height: 300px;
        }

        .legend {
            text-align: left;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .legend li {
            display: block;
            height: 20px;
            font-size: 12px;
            color: #333;
            width: 100%;
        }

        .legend li span {
            display: inline-block;
            height: 12px;
            width: 12px;
            border-radius: 3px;
            margin-right: 6px;
        }

        .average {
            background-color: #FF99FF;
        }
    </style>
</head>

<body>

    <div style="padding-left:10px;padding-right:10px;">
        <table id="datagrid" cellpadding="0" cellspacing="0">
            <tr style="background-color: #E2ECF5;">
                <td width="20%">KPI</td>
                <td width="20%">一月</td>
                <td width="20%">二月</td>
                <td width="20%">三月</td>
                <td width="20%">Total</td>
            </tr>
            <tr>
                <td>SB1</td>
                <td id="oeeQualifiedRate2" class="total1 total5">2</td>
                <td id="oeeQualifiedRate3" class="total1 total6">3</td>
                <td id="oeeQualifiedRate4" class="total1 total7">4</td>
                <td id="oeeQualifiedRate5" class="total_total1 total4" style="background-color: #FFFF99;">total1</td>
            </tr>
            <tr>
                <td>SB2</td>
                <td id="oee2" class="total2 total5">5</td>
                <td id="oee3" class="total2 total6">5</td>
                <td id="oee4" class="total2 total7">5</td>
                <td id="oee5" class="total_total2 total4" style="background-color: #FFFF99;">total2</td>
            </tr>
            <tr>
                <td>SB3</td>
                <td id="efficiency2" class="total3 total5">45</td>
                <td id="efficiency3" class="total3 total6">324</td>
                <td id="efficiency4" class="total3 total7">34</td>
                <td id="efficiency5" class="total_total3 total4" style="background-color: #FFFF99;">total3</td>
            </tr>
            <tr>
                <td>Total</td>
                <td id="passingRate2" class="total_total5">77</td>
                <td id="passingRate3" class="total_total6">7</td>
                <td id="passingRate4" class="total_total7">8</td>
                <td id="passingRate5" class="total_total4" style="background-color: #FFFF99;">total4</td>
            </tr>
        </table>

    </div>
    <script>
        var haiweiCaculator = new HaiweiCaculator();
        haiweiCaculator.caculateTotal();
    </script>
</body>

</html>